<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>居民健康卡消费查询</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">

 

 <script type="text/javascript" src="<%=basePath%>/js/iscroll.js"></script>

  
 
<script type="text/javascript">
var str=new Array(); 
$(document).ready(function(){
	  $("#input").click(function(){
	// $("#collapse_p").text("");
	//	  alert("aaa");
		$.ajax({
			url:"queryCard.html",
			type:"post",
			dataType:"json",
			async: false,
			data:{username:$("#username").val(),password:$("#password").val()},
			success:function(data){	
				$(data).each(function(index){				
						var	val = data[index];
				//	alert(data[0].tradedate.length);		
							
						$("#cash").html(val.cash+"元");
						$("#account1").html(val.account1+"元");
						 str[index]="消费日期："+val.tradedate+"   地点"+val.tradeplace+"   明细"+val.tradebrief+"   金额"+val.tradeamount+"元"+"";
						$(".trade").append(str);
					
				 
				});
				
			},
			
			error:function() {
				alert("error");		
			}
		
		
		});
			if(str.length==0){
			 	$("#li_0").html("暂无消费记录");
			 	$("#li_1").html("暂无消费记录");
			 	$("#li_2").html("暂无消费记录");
			}
			else if(str.length==1){
				$("#li_0").html(str[0]);
			 	$("#li_1").html("已显示您的所有消费记录");
			 	$("#li_2").html("已显示您的所有消费记录");
			}else if(str.length==2){
				$("#li_0").html(str[0]);
			 	$("#li_1").html(str[1]);
			 	$("#li_2").html("已显示您的所有消费记录");
			}else {
				$("#li_0").html(str[0]);
			 	$("#li_1").html(str[1]);
			 	$("#li_2").html(str[2]);
			}
	
	  });
	 
   });
  var myScroll,
	
	pullUpEl, pullUpOffset,
	generatedCount = 0;
	var x=3;


function pullUpAction () {
	
	setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
	/*	var el, li, i;
		el = document.getElementById('thelist');

		for (i=0; i<3; i++) {
			li = document.createElement('li');
			li.innerText = '暂无......' ;
			el.appendChild(li, el.childNodes[0]);
		}
		*/
	
	for (var i=x; i<x+3; i++) {	
		if(i>str.length){
	//		str[i]="已显示您的所有消费记录";
	//		var html ="<li class='div_append"+i+"' style='background-color:white; height:40px;-webkit-text-size-adjust:none;font-size:12px;' ></li>";
	//		  $("#thelist").append(html);
			//	alert(str.length);
	//		  $(".div_append"+i).html(str[i]);
			  break;
		}
		else{
	     var html ="<li class='div_append"+i+"' style='background-color:white; height:40px;-webkit-text-size-adjust:none;font-size:12px;' >已显示您的所有消费记录</li>";
		  $("#thelist").append(html);
		//	alert(str.length);
		  $(".div_append"+i).html(str[i]);
		}
	}
		x=x+3;
		
		
		myScroll.refresh();		// Remember to refresh when contents are loaded (ie: on ajax completion)
	}, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
}

function loaded() {
	
	pullUpEl = document.getElementById('pullUp');	
	pullUpOffset = pullUpEl.offsetHeight;
	
	myScroll = new iScroll('wrapper', {
		useTransition: true,
	
		onRefresh: function () {
			
			if (pullUpEl.className.match('loading')) {
				pullUpEl.className = '';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '滑动查看更多消费记录';
			}
		},
		onScrollMove: function () {
			
		if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
				pullUpEl.className = 'flip';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '滑动查看更多消费记录';
				this.maxScrollY = this.maxScrollY;
			} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
				pullUpEl.className = '';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '滑动查看更多消费记录';
				this.maxScrollY = pullUpOffset;
			}
		},
		onScrollEnd: function () {
		
			if (pullUpEl.className.match('flip')) {
				pullUpEl.className = 'loading';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';				
				pullUpAction();	// Execute custom function (ajax call?)
			}
		}
	});
	
	setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);


</script>

<style type="text/css" media="all">
.form{
  width: 100%;
  margin: 0.3rem auto;
  font-size: 0.7rem;
  td{
    height: 2.5rem;
  }
  input{
    font-family: "Microsoft Yahei";
    outline: none;
    color: #d8d8d8;
  }
  input[type=text],input[type=phone],input[type=email]{
    border: 1px solid #e10000;
    height: 1.55rem;
    line-height: 1.55rem;
    padding-left: 0.4rem;
    width: 100%;
    box-sizing: border-box;
    background: transparent;
  }
  }
ul,li {
	padding:0;
	margin:0;
	border:0;
	
}

body {
	font-size:12px;
	-webkit-user-select:none;
    -webkit-text-size-adjust:none;
	font-family:helvetica;
}

#header {
	
	top:0; left:0;
	width:100%;
	height:100px;
	line-height:45px;
	background-color:#d51875;
	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
	background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
	background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
	padding:0;
	color:#eee;
	font-size:20px;
	text-align:center;

}



#footer {
	
	bottom:0; left:0;
	width:100%;
	height:48px;
	background-color:#222;
	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
	background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
	background-image:-o-linear-gradient(top, #999, #666 2%, #222);
	padding:0;
	border-top:1px solid #444;
}

#wrapper {

	top:45px; bottom:48px; left:-9999px;
	width:100%;
	background:#aaa;
	overflow:auto;
}

#scroller {
	
/*	-webkit-touch-callout:none;*/
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	width:100%;
	padding:0;
}

#scroller ul {
	list-style:none;
	padding:0;
	margin:0;
	width:100%;
	text-align:left;
}

#scroller li {
	padding:0 10px;
	height:40px;
	line-height:40px;
	border-bottom:1px solid #ccc;
	border-top:1px solid #fff;
	background-color:#fafafa;
	font-size:14px;
}

#myFrame {
	position:absolute;
	top:0; left:0;
}




 #pullUp {
	background:#fff;
	height:40px;
	line-height:40px;
	padding:5px 10px;
	border-bottom:1px solid #ccc;
	font-weight:bold;
	font-size:14px;
	color:#888;
}
#pullUp .pullUpIcon  {
	display:block; float:left;
	width:40px; height:40px;
	background:url(pull-icon@2x.png) 0 0 no-repeat;
	-webkit-background-size:40px 80px; background-size:40px 80px;
	-webkit-transition-property:-webkit-transform;
	-webkit-transition-duration:250ms;	
}


#pullUp .pullUpIcon  {
	-webkit-transform:rotate(-180deg) translateZ(0);
}



#pullUp.flip .pullUpIcon {
	-webkit-transform:rotate(0deg) translateZ(0);
}

 #pullUp.loading .pullUpIcon {
	background-position:0 100%;
	-webkit-transform:rotate(0deg) translateZ(0);
	-webkit-transition-duration:0ms;

	-webkit-animation-name:loading;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
}

@-webkit-keyframes loading {
	from { -webkit-transform:rotate(0deg) translateZ(0); }
	to { -webkit-transform:rotate(360deg) translateZ(0); }
}

</style>
</head>
<body>

  <div data-role="page">
         <div data-role="content" style="background-color:#ADDD89;padding:0;height:40px;">
         <center> 
         <p  style=" margin-top:10px;font-size:20px;font-weight:bold;text-shadow:none;">居民健康卡</p>
         </center> 
         </div>

  <div style="margin-top:10px;">
<form method="get">
    <table class="form">
        <tr>
            <td colspan="3"><input style="background-color:white;" type="text" placeholder="请输入卡号" name="username" id="username"/><span></span></td>
        </tr>
        <tr>
            <td colspan="3"><input style="background-color:white;" type="text" placeholder="请输入密码" name="password" id="password"/><span></span></td>
        </tr>
         </table>
          <div style="margin-left:7%;margin-right:7%;">
          <input style="background-color:#ADDD89;" type="button"  id="input"  value="提交"/>
        
           </div>
            
</form>
</div>
  
  <div data-role="content" style="margin-top:10px;">
         <ul data-role="listview"  >
         <li style="background-color:white;font-size:15px;" >电子现金余额:<div id="cash" style="  height:20px;float:right;margin-right:25%"></div></li>
         <li style="background-color:white;font-size:15px;" >卡内账户余额:<div id="account1" style="height:20px;float:right;margin-right:25%"></div></li>
         </ul>
          </div>
    <div style="margin-top:10px;margin-left:auto;margin-right:auto;"> 
   
   <h1 align="left" style="font-size:15px; margin-top:15px;margin-left:3% ;color:#ADDD89;font-weight:bold">消费记录</h1>

    </div>
    <div style="position:absolute;z-index:99">
	</div>
<div id="wrapper" style="margin-top:10px; ">
	<div id="scroller" >
	

		<ul id="thelist" >
			<li id="li_0"  style=" background-color:white; height:40px;-webkit-text-size-adjust:none;font-size:12px;">暂无.....</li>
			<li id="li_1" style=" background-color:white; height:40px;-webkit-text-size-adjust:none;font-size:12px;">暂无.....</li>
			<li id="li_2"  style=" background-color:white; height:40px;-webkit-text-size-adjust:none;font-size:12px;">暂无.....</li>
			
			
		</ul>
		<div id="pullUp">
			<span class="pullUpIcon"></span><span class="pullUpLabel">滑动查看更多消费记录</span>
		</div>
	</div>
</div>
<div style="position:absolute;z-index:99">
	</div>
 <div data-role="content" style="padding:0;height:40px;">
         <center> 
         <p>以上信息非实时记录，仅供参考</p>
          </center> 
          </div>
<div id="footer"></div>
</div>
</body>
</html>